<!--
 * @Description: 陌生人库
 * @Author: xuzp4
 -->
<template>
  <div class="parent d-flex flex-column">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{ $t("route.moshengrenku") }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="divider"></div>
    <div class="header">
      <el-form inline :model="formData">
        <el-form-item :label="$t('zhuapaijilu.shaixuantiaojian')">
          <MyDatePicker v-model="formData.start_time"> </MyDatePicker>
        </el-form-item>
        <el-form-item :label="$t('zhuapaijilu.zhi')">
          <MyDatePicker v-model="formData.stop_time"> </MyDatePicker>
        </el-form-item>
        <el-form-item>
          <CameraSelect v-model="formData.channels" />
        </el-form-item>
        <el-form-item>
          <MyButton class="confirm" @click="search">{{
            $t("common.confirmQueding")
          }}</MyButton>
          <MyButton
            className="export"
            icon="el-icon-download"
            @click="handleExportAll"
            >{{ $t("common.allExport") }}</MyButton
          >
          <MyButton
            className="export"
            icon="el-icon-download"
            @click="handleExport"
            >{{ $t("common.export") }}</MyButton
          >
          <el-checkbox
            border
            class="select-all"
            v-model="checkedAll"
            :indeterminate="isIndeterminate"
            @change="handleSelectAll"
            >{{ $t("common.selectAll") }}</el-checkbox
          >
          <MyButton
            v-if="curR === 'library'"
            className="delete"
            icon="el-icon-delete"
            @click="handleDeleteAll"
            >{{ $t("common.allDelete") }}</MyButton
          >
          <MyButton
            v-if="curR === 'library'"
            className="delete"
            icon="el-icon-delete"
            @click="handleDeleteMultiple"
            >{{ $t("common.multipleDelete") }}</MyButton
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="content flex-1 d-flex flex-column jc-start ai-start">
      <div class="card-wrapper d-flex">
        <Card
          class="mr-20 mb-20"
          v-for="(item, index) in cardList"
          :key="index"
          :cardData="item"
          @click.native="handleSelect(item)"
          @dblclick.native="handleShowDetail(item)"
        />
        <NoData v-if="cardList.length === 0" />
      </div>
      <Pagination
        v-show="total_num > 10"
        :total="total_num"
        :page.sync="pageNumber"
        :limit.sync="qry_len"
        @pagination="getStaffList()"
      />
    </div>
    <MultipleExportDialog
      :zippasswd="zippasswd"
      :num="total_num"
      @confirm="confirmBatch"
      @cancel="cancelBatch"
      :visible.sync="isBatchExportShow"
      :step="batchStep"
    />
    <StaffDetail :visible.sync="isDetailShow" :row="row" />
    <SingleExportDialog
      :zippasswd.sync="zippasswd"
      @confirm="confirmSingle"
      @cancel="cancelSingle"
      :visible.sync="isSingleExportShow"
      :step="singleStep"
    />
  </div>
</template>

<script>
import moment from "moment";
import CameraSelect from "@/components/select/Camera";
import MyButton from "@/components/Button";
import Card from "./Card";
import Pagination from "@/components/Pagination";
import { validatePwd, downLoadUrl } from "@/services";
import MultipleExportDialog from "@/components/MultipleExportDialog.vue";
import StaffDetail from "@/views/zhuapaijilu/faceRecord/Detail.vue";
import SingleExportDialog from "@/components/SingleExportDialog.vue";
import MyDatePicker from "@/components/DatePicker";
import util from "@/utils";
import {
  getStaffList,
  deleteStaffList,
  exportStaffList,
  exportBatchStaffList,
  deleteAllStaff,
} from "./service";
import { MOSHENGREN_ID } from "@/utils/CONSTANT";
export default {
  components: {
    CameraSelect,
    MyButton,
    Card,
    Pagination,
    MultipleExportDialog,
    StaffDetail,
    SingleExportDialog,
    MyDatePicker,
  },
  data() {
    return {
      formData: {
        start_time: moment()
          .startOf("day")
          .subtract(7, "days")
          .format("YYYY-MM-DD HH:mm:ss"),
        stop_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
      },
      qry_len: 50,
      pageNumber: 1,
      total_num: 0,
      isBatchExportShow: false,
      cardList: [],
      zippasswd: "",
      batchStep: 0,
      isDetailShow: false,
      row: {},
      isSingleExportShow: false,
      singleStep: 0,
      checkedAll: false,
      isIndeterminate: false,
      lib_id: MOSHENGREN_ID,
      curR: "",
    };
  },
  mounted() {
    this.curR = localStorage.getItem("curR");
    this.search();
  },
  computed: {
    selectedList() {
      return this.cardList.filter((item) => item.isSelect);
    },
    start_no: {
      get() {
        return 1 + this.qry_len * (this.pageNumber - 1);
      },
    },
  },
  watch: {
    cardList: {
      handler(val) {
        if (val.length === 0) return;
        let allChecked = true;
        let allNoChecked = true;
        val.forEach((item) => {
          if (!item.isSelect) {
            allChecked = false;
          } else {
            allNoChecked = false;
          }
        });
        this.checkedAll = allChecked;
        this.isIndeterminate = !allNoChecked && !allChecked;
      },
      deep: true,
    },
  },
  methods: {
    handleDeleteAll() {
      util.confirm(
        this.$t("delete_all"),
        this.$t("geylib_delete_tips"),
        this.$t("confDelete"),
        this.$t("cancel"),
        async () => {
          const res = await deleteAllStaff({ lib_id: this.lib_id });
          if (res.code === 0) {
            util.msg.success("deleteSuccess");
            this.getStaffList();
          }
        }
      );
    },
    handleDeleteMultiple() {
      if (!this.selectedList.length) {
        this.$message.warning(this.$t("common.notSelectRecord"));
        return;
      }
      this.$confirm(
        this.$t("common.currentDeleteRecord", [this.selectedList.length]),
        this.$t("common.multipleDelete"),
        {
          confirmButtonText: this.$t("common.confirmQueding"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        const params = {
          img_ids: this.selectedList.map((item) => item.img_id).join(","),
          lib_id: this.lib_id,
        };
        const res = await deleteStaffList(params);
        if (res.code === 0) {
          util.msg.success("deleteSuccess");
          this.getStaffList();
        }
      });
    },
    cancelSingle() {
      this.singleStep = 0;
      this.zippasswd = "";
    },
    async confirmSingle(form) {
      if (this.singleStep === 1) {
        this.isSingleExportShow = false;
        this.zippasswd = "";
        this.singleStep = 0;
        return;
      } else {
        const { curuser_pwd } = form;
        const res = await validatePwd({ userpasswd: curuser_pwd });
        if (res.code === 0) {
          const params = {
            person_ids: this.selectedList
              .map((item) => item.person_id)
              .join(","),
            lib_id: this.lib_id,
          };
          const res = await exportStaffList(params);
          this.singleStep = 1;
          this.zippasswd = res.data.zippasswd;
          downLoadUrl(res.data.export_url);
        }
      }
    },
    handleExport() {
      if (!this.selectedList.length) {
        this.$message.warning(this.$t("common.notSelectRecord"));
        return;
      }
      this.isSingleExportShow = true;
    },
    handleShowDetail(item) {
      if (this.curR === "library") {
        // 显示人脸详情
        this.isDetailShow = true;
        this.row = { ...item };
      } else {
        this.$router.push({
          name: "greyRecord",
          query: {
            lib_id: this.lib_id,
            id: item.person_id,
          },
        });
      }
    },
    async confirmBatch(form) {
      // 验证密码
      if (this.batchStep === 0) {
        const { curuser_pwd } = form;
        const res = await validatePwd({ userpasswd: curuser_pwd });
        if (res.code === 0) {
          this.batchStep = 1;
        }
      } else {
        const params = {
          lib_id: this.lib_id,
          ...this.formData,
          channels:
            (this.formData.channels && this.formData.channels.join(",")) ||
            void 0,
          ...form,
        };
        const res = await exportBatchStaffList(params);
        if (res.code === 0) {
          this.zippasswd = res.data.zippasswd;
          downLoadUrl(res.data.export_url);
        }
      }
    },
    cancelBatch() {
      this.batchStep = 0;
      this.zippasswd = "";
    },
    async search() {
      this.pageNumber = 1;
      this.$nextTick(() => {
        this.getStaffList();
      });
    },
    async getStaffList() {
      const params = {
        ...this.formData,
        channels:
          (this.formData.channels && this.formData.channels.join(",")) ||
          void 0,
        qry_len: this.qry_len,
        start_no: this.start_no,
      };
      const res = await getStaffList(params);
      if (res.code == 0) {
        this.cardList = res.data.record;
        this.total_num = res.data.total_num;
      }
    },
    handleExportAll() {
      this.isBatchExportShow = true;
    },
    handleSelect(item) {
      this.$set(item, "isSelect", !item.isSelect);
    },
    handleSelectAll(val) {
      this.cardList.forEach((item) => {
        this.$set(item, "isSelect", val);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  padding: 20px;
  .divider {
    width: 100%;
    height: 2px;
    background-color: rgba(217, 222, 229, 1);
    margin-top: 30px;
    margin-bottom: 30px;
    flex-shrink: 0;
  }
  .content {
    width: 100%;
  }
  .card-wrapper {
    transition: all 0.1s;
    cursor: pointer;
    .img-box {
      border-radius: 8px;
      height: 250px;
      width: 160px;
    }
    &.active {
      border: 1px solid #09c7aa;
    }
    .text-wrapper {
      width: 160px;
    }
  }
}
</style>
